import React, { Children, useState } from 'react';
import { Sidebar, Toast ,Grid ,Image ,Button} from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import { STROETYPE ,PROPSTYPE,CHILDRENTYPE,CLASSIFYTYPE} from '../../Type/Store.d';

function Classify() {
    const Dispatch = useDispatch();
    const Navigate = useNavigate();
    const [active, setActive] = useState(0);
    const list = useSelector((state:STROETYPE)=>state.list);
    const childrenList = useSelector((state:STROETYPE)=>state.childrenList);
    const typelist = ['策略','装扮','仙侠','休闲']
    // const [childrenList,setchildrenList] = useState(list[0].children as PROPSTYPE[])
    return (
        <div className='Classify'>
            <Sidebar
                value={active}
                onChange={(v) => {
                    setActive(v);
                    Dispatch({
                        type:CHILDRENTYPE,
                        payload:v
                    })
                    // setchildrenList(list[v].children as PROPSTYPE[])
                }}
                >
                    {
                        list.map((item,index)=>{
                            return <Sidebar.Item title={item.txt} key={index}>
                                <div className='type'>
                                    {
                                        typelist.map((s,y)=>{
                                            return <span key={y} onClick={()=>{
                                                Dispatch({
                                                    type:CLASSIFYTYPE,
                                                    payload:s
                                                })
                                            }}>{s}</span>
                                        })
                                    }
                                </div>
                                <Grid columnNum={2}>
                                    {childrenList.map((v, i) => (
                                        <Grid.Item key={i}>
                                            <Image width="100" height="100" src={v.src} />
                                            <p>{v.txt}</p>
                                            <Button plain type="primary" size="small">{v.type}</Button>
                                        </Grid.Item>
                                    ))}
                                </Grid>
                            </Sidebar.Item>
                        })
                    }
                
            </Sidebar>  
                    
            
        </div>
    )
}

export default Classify